<template>
  <div id="cryptos">
    <div class="miningMachineHome">
      <assets-head :title="$t('矿机')" :showLeft="true" :goHome="goHome"></assets-head>

      <div class="box-border px-30 mt-42">
        <div class="flex justify-between text-grey relative">
          <div class="flex flex-col">
            <span class="text-grey font-30">{{ $t('托管金额') }}（{{
                minglist.buyCurrency
                    ? minglist.buyCurrency.toUpperCase() : 'USDT'
              }}）</span>
            <span class="font-66 mt-20 font-700 textColor">{{ minglist.totalBuySum }}</span>
          </div>
        </div>
        <div class="flex mt-44 justify-between font-26 lh-32 mb-35">
          <div class="flex flex-col ">
            <div class="text-grey font-26">预计日收益
              （{{ minglist.outputCurrency ? minglist.outputCurrency.toUpperCase() : 'USDT' }}）
            </div>
            <div class="font-40 mt-17 mb-9 font-36 textColor">{{ minglist.todayProfit }}</div>
          </div>
          <div class="flex flex-col">
            <div class="text-grey font-26">{{
                $t('累计收益')
              }}（{{ minglist.outputCurrency ? minglist.outputCurrency.toUpperCase() : 'USDT' }}）
            </div>
            <div class="font-40 mt-17 mb-9 font-36 textColor">{{ minglist.userProfit }}</div>
          </div>
          <div class="flex flex-col">
            <div class="text-grey font-26">{{ $t('托管订单') }}</div>
            <div class="font-40 mt-17 mb-9 font-36 textColor">{{ minglist.orderSum }}</div>
          </div>
          <!-- <div class="flex flex-col">
            <div class="text-grey font-26">{{ $t('平台币收益') }}</div>
            <div class="font-40 mt-17 mb-9 font-36 textColor">{{ psdt }}</div>
          </div> -->
        </div>
      </div>
      <div class="flex justify-between box-border px-30 mt-43">
        <!-- <div @click="$router.push('/funds?tab=3&index=1')" -->
        <div @click="this.$router.push({
            name: 'funds',
            query: { index:1,tab:3  }
          })"
             class="greyBg text-grey w-370 py-13 rounded-lg font-27 text-center mr-20 active activeBKClick">
          {{ $t('托管订单') }}
        </div>
        <div @click="getpsdt()"
             class="greyBg text-grey w-370 py-13 rounded-lg font-27 text-center mr-20 active activeBKClick">平台币收益
        </div>
      </div>
      <div class="px-30 mt-40 pb-80">
        <div v-for="(item, index) in list" :key="index"
             class="card flex justify-between items-center relative rounded-lg borderColor contBackground"
             style="background-color: black;">
          <div class="title absolute px-16 py-8 font-26 text-white top-0 left-22"
               :class="item.onSale === '0' ? 'inactive' : 'bg-green'">
            <!-- {{item.on_sale==='0'?$t('已锁定，联系客服'):$t('日收益率')}}{{item.on_sale==='0'?null:item.daily_rate}}{{item.on_sale==='0'?null:index===0?'':'%'}} -->
            {{
              item.onSale === '0' ? $t('已锁定，联系客服') : (item.cycle ? item.cycle + $t('天') + '预期收益' + ' ' +
                  item.allRate : $t('30天预期收益') + ' ' + item.all_rate + '%')
            }}
          </div>
          <div class="flex justify-start items-center flex-1" @click="click_buy(item, index)">
            <img v-if="index === 0" class="w-120 h-130 mr-10" src="./images/machine1.png" alt="">
            <img v-else-if="index === 1" class="w-120 h-130 mr-10" src="./images/machine_asic.png" alt="">
            <img v-else-if="index === 2" class="w-120 h-130 mr-10" src="./images/machine_ex.png" alt="">
            <img v-else-if="index === 3" class="w-120 h-130 mr-10" src="./images/machine_fpga.png" alt="">
            <img v-else-if="index === 4" class="w-120 h-130 mr-10" src="./images/machine_ipfs.png" alt="">
            <img v-else-if="index === 5" class="w-120 h-130 mr-10" src="./images/machine_gpu.png" alt="">
            <img v-else-if="index === 6" class="w-120 h-130 mr-10" src="./images/machine_ck6.png" alt="">
            <img v-else class="w-120 h-130 mr-10" src="./images/machine_ex.png" alt="">
            <div class="flex flex-col items-start">
              <span class="font-35 font-600 textColor" style="max-width:200px;">
                <template v-if="$i18n.locale === 'CN'">
                  {{ item.nameCn }}
                </template>
                <template v-else-if="$i18n.locale === 'zh-CN'">
                  {{ item.nameCn }}
                </template>
                <template v-else>
                  {{ item.nameCn }}
                </template>
              </span>

              <span class="font-26 mt-24 mb-16 textColor">{{ $t('日收益率') }}:{{
                  item.dailyRate
                }}{{ item.test ? 'USDT' : '%' }}</span>
              <span class="font-26 mb-16 textColor">{{
                  $t('限额')
                }} {{ item.investmentMin ? item.investmentMin + '-' : "-" }}{{
                  item.investmentMax
                }}
                {{ item.buyCurrency ? item.buyCurrency.toUpperCase() : '--' }}</span>
              <span class="font-26 textColor">{{ $t('周期') }} {{
                  item.cycle == 0 ? $t('无限期') : item.cycle + $t('天')
                }}</span>
            </div>
          </div>
          <div @click="item.minerType === '2' ? mining(item) : this.$router.push({
            name: 'MachineBuy',
            query: { obj: JSON.stringify(item) }
          })" class="py-16 w-180 font-28 font-600 text-center rounded-lg"
               :class="item.limit === '0' ? 'inactive activeDisableClick' : 'active activeBKClick'">{{
              item.limit === '0' ? $t('已锁定') : item.minerType == 1 ? '立即体验' : '立即租用'
            }}
          </div>
        </div>
      </div>
    </div>
    <van-dialog
        v-model:show="showDialog"
        title="平台币收益信息"
        confirm-button-text="确定"
        @close="closeItem()"
    >
      <p style="width: 100%; height: 30px; font-size: 20px; color: #000; font-weight: 100; text-align: center; background-color: #ffffff;">
        平台币： {{ psdt }}</p>
      <p style="width: 100%; height: 30px; font-size: 20px; color: #000; font-weight: 100; text-align: center; background-color: #ffffff;">
        {{ hours }} 小时 {{ minutes }} 分钟 {{ seconds }} 秒</p>
    </van-dialog>


  </div>
</template>

<script>
import assetsHead from '@/components/Transform/assets-head/index.vue';
import {getMachineList} from "@/service/financialManagement.api.js";
import {getMiningRevenueStatisticsList} from "@/service/financialManagement.api.js";
import {miningFree, getMiningFree, getTime} from "@/service/financialManagement.api.js";
import {watch} from 'vue';

export default {
  name: "fundHome",
  components: {
    assetsHead,
  },
  data() {
    return {
      goHome: true,
      minglist: {},
      list: [],
      psdt: '0',
      showDialog: false,
      hours: 0,
      minutes: 0,
      seconds: 0,
      isRunning: true,
      dialogTimer: null,
      getMiningTimer: null

    }
  },
  methods: {
    getpsdt() {
      this.showDialog = true
      this.getMining()
      getTime().then(res => {
        const distance = res;
        this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
      });
      this.dialogTimer = setInterval(() => {
        this.getMining()
      }, 5000) // 每1秒执行1次
      this.getMiningTimer = setInterval(() => {
        getTime().then(res => {
          const distance = res;
          this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        });
      }, 1000)
    },

    watch: {
      showDialog(newVal, oldVal) {
        // 执行一些操作
        alert(newVal, oldVal)
      }
    },

    closeItem() {
      this.showDialog = false
      clearInterval(this.dialogTimer)
      this.dialogTimer = null,
          clearInterval(this.getMiningTimer)
      this.getMiningTimer = null,
          getMachineList().then(res => {
            console.log('矿机列表', res)
            this.list = res
            //console.log(this.list)
          })
    },

    mining(row) {
      this.getTimerValue
      const form = row
      form.minerId = row.uuid


      miningFree(form)
          .then(res => {
            getMachineList().then(res => {
              console.log('矿机列表', res)
              this.list = res
            })

          })
    },
    getMining() {
      getMiningFree().then(
          res => {
            this.psdt = res
          }
      )
    },
    click_share() {
      this.$router.push('/promote');
    },
    click_buy(item, index) {
      if (item.onSale === '0') {
        return
      }
      item['mine_index'] = index
      this.$router.push({
        path: '/cryptos/pool-lock',
        //query: item
        query: {obj: JSON.stringify(item)}
      })
    }
  },
  activated() {
    getMachineList().then(res => {
      console.log('矿机列表', res)
      this.list = res
      //console.log(this.list)
    })
    // getMiningRevenueStatisticsList(
    //   this.$store.state.user.userInfo.token
    // ).then(res => {
    //   //console.log('矿机收益', res)
    //   this.minglist = res
    // })
  },
  created() {
    if (this.getMiningTimer) {
      clearInterval(this.getMiningTimer)
      this.getMiningTimer = null
    }
    console.log(this.$i18n.locale)
    getMachineList().then(res => {
      console.log('矿机列表', res)
      this.list = res
    })
    getMiningRevenueStatisticsList(
        this.$store.state.user.userInfo.token
    ).then(res => {
      console.log('矿机收益', res)
      this.minglist = res
    })
    this.getMining()
  },
  beforeDestroy() {
    // if(this.dialogTimer){
    //   clearInterval(this.dialogTimer)
    //   this.dialogTimer = null
    // }
    // if(this.getMiningTimer){
    //   clearInterval(this.getMiningTimer)
    //   this.getMiningTimer = null
    // }
  }
}
</script>

<style lang="scss">
@import "@/assets/init.scss";

#cryptos {
  .activeBKClick {
    &:active {

      background: $btn_main;
      border-color: $btn_main;

      opacity: 0.5;
    }
  }

  .activeClick {
    &:active {
      background: $grey_bg;
      opacity: 0.6;
    }
  }

  .activeDisableClick {
    &:active {
      background: #474B62;
      opacity: 0.5;
    }
  }

  .miningMachineHome {
    width: 100%;
    box-sizing: border-box;
  }

  .active {
    color: $text_color;

    background: $btn_main;
    border-color: $btn_main;
  }

  .inactive {
    color: $text_color;
    background: #08090a;
    border-color: #474B62;
  }

  .title {
    border-radius: 0 0 8px 8px;
  }

  .card {
    padding: 80px 22px 22px 22px;
    margin-bottom: 32px;
  }
}
</style>
